<template>
  <v-card flat class="Task-Container" :class="[propArrangement]">
    <v-toolbar class="header" color="#626C84" height="32">
      {{ propTitle }}
    </v-toolbar>
    <v-list subheader>
      <v-list-item v-for="task in taskList" :key="task.id" class="text-left">
        <v-list-item-avatar class="align-start">
          <v-img
            width="40"
            height="40"
            :alt="`avatar`"
            :src="task.avatar"
          ></v-img>
          <span class="user-name">
            {{ task.principal }}
          </span>
        </v-list-item-avatar>
        <v-list-item-content :class="{ 'mr-5': propArrangement === 'relax' }">
          <v-list-item-title>
            <div v-text="task.customerName"></div>
            <div>{{ task.projectType }} - {{ task.number }}</div>
          </v-list-item-title>

          <v-list-item-subtitle
            v-text="task.projectDescription"
          ></v-list-item-subtitle>
          <v-list-item-subtitle v-text="task.address"></v-list-item-subtitle>
        </v-list-item-content>

        <v-list-item-action>
          <v-list-item-action-text
            class="date"
            :class="{ 'red-color': propType === 'delayed' }"
          >
            {{ task.startDate }} -
            <br v-if="propArrangement === 'relax'" />
            {{ task.endDate }}
          </v-list-item-action-text>
          <v-card class="transparent" flat width="100%">
            <v-row no-gutters class="justify-end">
              <v-col :cols="propArrangement === 'compact' ? 6 : 9">
                <v-progress-linear
                  :value="task.progress"
                  color="#F8B254"
                  background-color="#BABABC"
                  height="16"
                  class="progress-linear rounded-pill"
                ></v-progress-linear>
              </v-col>
              <v-col
                :cols="propArrangement === 'compact' ? 2 : 3"
                class="text-right"
              >
                <span>{{ task.progress }} %</span>
              </v-col>
            </v-row>
          </v-card>
          <v-list-item-action-text
            class="d-flex align-center"
            :class="{ 'order-first': propArrangement === 'relax' }"
          >
            <v-chip
              :color="task.status === 'Ongoing' ? '#EB9B31' : '#556282'"
              label
              dark
              x-small
            >
              {{ task.status }}
            </v-chip>
            <div class="status">
              <v-icon x-small :color="priorityColor(task.priority)">{{
                task.priority === "Low" ? "mdi-arrow-down" : "mdi-arrow-up"
              }}</v-icon>
              <v-list-item-action-text>{{
                task.priority
              }}</v-list-item-action-text>
            </div>
          </v-list-item-action-text>
          <v-card class="transparent" flat width="100%">
            <v-row no-gutters class="justify-space-between">
              <v-col class="text-left">
                <v-icon class="mr-4 icon">mdi-folder</v-icon>
                <v-icon class="icon">mdi-file-word</v-icon>
              </v-col>
              <v-spacer v-if="propArrangement === 'compact'"></v-spacer>
              <v-col class="text-left">
                <v-tooltip content-class="tooltip" right>
                  <template v-slot:activator="{ on }">
                    <v-icon
                      class="mr-4 icon"
                      v-on="on"
                      @click="$emit('openMessage')"
                    >
                      mdi-chat-processing
                    </v-icon>
                  </template>
                  Message
                </v-tooltip>
                <TooltipInfo title="Project Info">
                  <template #default="{ on }">
                    <v-icon class="pointer icon" v-on="on">
                      mdi-information
                    </v-icon>
                  </template>
                  <template #content>
                    <v-spacer class="text-left">
                      <v-col class="pa-0 mb-2">
                        <v-row no-gutters>
                          <v-col :cols="6">Project Type</v-col>
                          <v-col :cols="6">{{ task.projectType }}</v-col>
                        </v-row>
                      </v-col>
                      <v-col class="pa-0 mb-2">
                        <v-row no-gutters>
                          <v-col :cols="6">Project Description</v-col>
                          <v-col :cols="6">{{ task.projectDescription }}</v-col>
                        </v-row>
                      </v-col>
                      <v-col class="pa-0 mb-2">
                        <v-row no-gutters>
                          <v-col :cols="6">Job Description</v-col>
                          <v-col :cols="6">{{ task.jobDescription }}</v-col>
                        </v-row>
                      </v-col>
                    </v-spacer>
                  </template>
                </TooltipInfo>
              </v-col>
            </v-row>
          </v-card>
        </v-list-item-action>
      </v-list-item>
    </v-list>
  </v-card>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import TooltipInfo from "@/components/TooltipInfo/TooltipInfo.vue";
interface ITaskItem {
  id: string;
  avatar: string;
  principal: string;
  customerName: string;
  projectType: string;
  number: string;
  projectDescription: string;
  jobDescription: string;
  address: string;
  startDate: string;
  endDate: string;
  progress: string;
  priority: string;
  status: string;
}
@Component({
  components: {
    TooltipInfo,
  },
  props: {
    arrangement: {
      type: String,
      default: "compact",
    },
    title: {
      type: String,
      default: "Task Title",
    },
    type: String,
  },
})
export default class Task extends Vue {
  get propType() {
    return this.$props.type;
  }

  get propArrangement() {
    return this.$props.arrangement;
  }

  get propTitle() {
    return this.$props.title;
  }
  taskList: Array<ITaskItem> = [
    {
      id: "1",
      avatar:
        "https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2022%2F0801%2F9ceecfb8j00rfxf1200dac000kk00epm.jpg&thumbnail=660x2147483647&quality=80&type=jpg",
      principal: "Ken Wong",
      customerName: "Auto Company",
      projectType: "DL",
      number: "2021120901.03",
      jobDescription: "Check System",
      projectDescription: "Check System",
      address: "@ Cable TV Tower, 9 Hoi Shing Road, Tsuen Wan",
      startDate: "2022-08-15 15:40",
      endDate: "2022-09-19 14:40",
      progress: "60",
      priority: "High",
      status: "Ongoing",
    },
    {
      id: "2",
      avatar:
        "https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2022%2F0801%2F9ceecfb8j00rfxf1200dac000kk00epm.jpg&thumbnail=660x2147483647&quality=80&type=jpg",
      principal: "Ken Wong",
      customerName: "Auto Company",
      projectType: "DK",
      number: "202112091.03",
      jobDescription: "System Installation",
      projectDescription: "System Installation",
      address: "@ Cable TV Tower, 9 Hoi Shing Road, Tsuen Wan",
      startDate: "2022-08-15 15:40",
      endDate: "2022-09-19 14:40",
      progress: "30",
      priority: "Low",
      status: "New Job",
    },
  ];

  priorityColor(priority: string) {
    switch (priority) {
      case "High":
        return "#F31616";
      case "Low":
        return "#67D245";
      case "Middle":
        return "#EB9B31";
      default:
        return "#F31616";
    }
  }
}
</script>
<style lang="scss" scoped>
@import "./Task.scss";
</style>
